<template>
    <view class="bg-[#f8f8f8] min-h-screen">
        <view class="text-[36rpx] pt-[20rpx] ">
            <text class="mr-[36rpx] ml-[32rpx] font-bold text-[#FD755D] border-b-[5rpx] border-[#FD755D]">书法一班</text>
            <text class="text-[#434141]">声乐三班</text>

        </view>
        <view class="bg-white pb-[20rpx] mt-[20rpx]">
            <view class="flex">
                <view
                    class="w-1/3 flex border border-[#FD755D]  items-center justify-center h-[86rpx] text-[34rpx] text-[#FD755D] bg-[#ffe3df]">
                    准备上课</view>
                <view class="w-1/3 flex border border-[#E4E1E1]  items-center justify-center h-[86rpx] text-[34rpx] ">
                    上课进行中</view>
                <view class="w-1/3 flex border border-[#E4E1E1]  items-center justify-center h-[86rpx] text-[34rpx] ">
                    课程已结束</view>

            </view>
            <view class="ml-[61rpx]">
                <view class="mt-[20rpx]">
                    <text>课程名称：</text>
                    <text></text>
                </view>
                <view class="mt-[20rpx]">
                    <text>班级名称：</text>
                    <text></text>
                </view>
                <view class="mt-[20rpx]">
                    <text>上课日期：</text>
                    <text></text>
                </view>
                <view class="mt-[20rpx]">
                    <text>上课时间：</text>
                    <text></text>
                </view>
                <view class="mt-[20rpx]">
                    <text>教师：</text>
                    <text></text>
                </view>
                <view class="mt-[20rpx]">
                    <text>教学点：</text>
                    <text></text>
                </view>
                <view class="mt-[20rpx]">
                    <text>地点：</text>
                    <text></text>
                </view>
                <view class="mt-[20rpx] flex items-center justify-center">
                    <view class=" mr-[80rpx] text-[#fff] py-[20rpx]  bg-[#2078FC] rounded w-[208rpx] text-center text-[32rpx]">请假
                    </view>
                    <view class=" text-white py-[20rpx]  bg-[#FD755D] rounded w-[208rpx]  text-center text-[32rpx]">请打卡</view>
                </view>
            </view>
        </view>
        <view class="my-[30rpx] text-[30rpx] text-center text-[#3d3d3d]">
            <view>距离打卡结束时间还有49分钟</view>
            <view class="mt-1">距离下课时间还有49分钟</view>
        </view>
        <view class="px-[40rpx] bg-white">
            <view class="py-[20rpx] border-b border-[#EFEFEF] text-center">课程历史记录</view>
            <view class="border-b border-[#EFEFEF] pb-[20rpx]">
                <view class="mt-[20rpx]">
                    <text>时间：</text>
                    <text class="ml-[20rpx]">2024.10.07 10:00 -11:00</text>
                </view>
                <view class="mt-[20rpx]">
                    <text>学校：</text>
                    <text class="ml-[20rpx]">青秀区老年大学</text>
                </view>
                <view class="mt-[20rpx]">
                    <text>班级：</text>
                    <text class="ml-[20rpx]">2024.10.07 10:00 -11:00</text>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup>
</script>